<script setup lang="ts">
import { ref, watch, reactive, onMounted, onUnmounted, nextTick } from "vue";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import ReTable from "@/components/ReTable/index.vue";
import ReHeaderSearch from "@/components/ReHeaderSearch/index.vue";
import ReNewDialog from "@/components/ReNewDialog/index.vue";
import { useSettingStoreHook } from "@/store/modules/settings";
defineOptions({
  name: "clientList"
});
interface ValueType {
  val: {
    buttonType: string;
  };
  row: object;
}
interface viewFormType {
  account: string;
  money: string;
  lucky_coin: string;
  star_stone: string;
}
interface editFormType {
  account: string;
  mobile: string;
  user_level: number;
  password: string;
  deal_password: string;
  id_card: string;
  user_name: string;
  nick_name: string;
  status: number;
  is_virtual: number;
  is_agency: number;
}
interface changeSuperiorFormType {
  account: string;
  superior_id: number;
}
interface capitalHandleFormType {
  account: string;
  money_type: number;
  handle_type: number;
  handle_amount: string;
  handle_memo: string;
}
const validatePhone = (rule: any, value: any, callback: any) => {
  const phoneRegex = /^1[3-9]\d{9}$/; // 中国大陆手机号正则表达式
  if (value === "") {
    callback(new Error("请输入手机号"));
  } else if (!phoneRegex.test(value)) {
    callback(new Error("请输入有效的手机号"));
  } else {
    callback();
  }
};
const pureSetting = useSettingStoreHook();
const dialogViewVisible = ref(false); // 资金查看弹窗是否显示
const dialogEditVisible = ref(false); // 编辑弹窗是否显示
const dialogChangeSuperiorVisible = ref(false); // 修改上级弹窗是否显示
const dialogCapitalHandleVisible = ref(false); // 资金操作弹窗是否显示
watch(
  () => pureSetting.buttonInfo,
  (newValue, oldValue) => {
    console.log("watch", newValue, oldValue);
    if (Object.keys(newValue).length !== 0) {
      let value = newValue as ValueType;
      console.log(value);
      //点击 资金查看
      switch (value.val.buttonType) {
        case "view":
          dialogViewVisible.value = true;
          break;
        case "edit":
          dialogEditVisible.value = true;
          console.log("用户页面", value);
          break;
        case "changeSuperior":
          dialogChangeSuperiorVisible.value = true;
          break;
        case "capitalHandle":
          dialogCapitalHandleVisible.value = true;
          break;
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
);
onUnmounted(() => {
  resetButtonInfo();
});
// 用户级别
const userLevelOptions = [
  {
    label: "普通玩家",
    value: 0
  },
  {
    label: "黄金代理",
    value: 1
  },
  {
    label: "白银代理",
    value: 2
  }
];
const viewForm = reactive<viewFormType>({
  account: "17777777777",
  money: "0",
  lucky_coin: "0.000",
  star_stone: "0.000"
});
const editForm = reactive<editFormType>({
  account: "17777777777", // 账号
  mobile: "17777777777", // 手机号
  user_level: 0, // 用户级别
  password: "", // 密码
  deal_password: "", // 交易密码
  id_card: "", // 身份证号
  user_name: "", // 姓名
  nick_name: "", // 昵称
  status: 0, // 状态 0正常 1禁用
  is_virtual: 0, // 是否虚拟 0否 1是
  is_agency: 0 // 是否代理 0否 1是
});
const editRules = reactive<FormRules<editFormType>>({
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur"
    }
  ],
  mobile: [
    // {
    //   required: true,
    //   message: "请输入手机号",
    //   trigger: "blur"
    // },
    { validator: validatePhone, trigger: "blur" }
  ],
  user_level: [
    {
      required: true,
      message: "请输入用户级别",
      trigger: "blur"
    }
  ]
});
const capitalHandleRules = reactive<FormRules<capitalHandleFormType>>({
  handle_amount: [
    {
      required: true,
      message: "请输入操作金额",
      trigger: "blur"
    }
  ]
});
const capitalHandleRuleFormRef = ref<FormInstance>();
const changeSuperiorForm = reactive<changeSuperiorFormType>({
  account: "17777777777", // 账号
  superior_id: 0 // 上级ID
});
const capitalHandleForm = reactive<capitalHandleFormType>({
  account: "17777777777", // 账号
  money_type: 0,
  handle_type: 0,
  handle_amount: "",
  handle_memo: ""
});
const moneyTypeOptions = [
  {
    label: "可用余额-当前余额0元",
    value: 0
  },
  {
    label: "幸运币-当前余额0.000元",
    value: 1
  },
  {
    label: "星石-当前余额0.000元",
    value: 2
  }
];
const handleTypeOptions = [
  {
    label: "增加",
    value: 0
  },
  {
    label: "减少",
    value: 1
  }
];
const resetButtonInfo = () => {
  pureSetting.setButtonInfo("");
};
// 编辑弹窗关闭
const handleCloseEditDialog = () => {
  dialogEditVisible.value = false;
  resetButtonInfo();
};
// 编辑弹窗确认
const handleConfirmEditDialog = () => {
  handleCloseEditDialog();
};
// 换绑上级弹窗关闭
const handleCancelChangeSuperiorDialog = () => {
  dialogChangeSuperiorVisible.value = false;
  resetButtonInfo();
};
// 换绑上级弹窗确认
const handleConfirmChangeSuperiorDialog = () => {
  handleCancelChangeSuperiorDialog();
};
// 资金操作弹窗关闭
const handleCancelCapitalHandleDialog = () => {
  resetCapitalHandleForm(capitalHandleRuleFormRef.value);
  dialogCapitalHandleVisible.value = false;
  resetButtonInfo();
};
// 资金操作弹窗确认
const handleConfirmCapitalHandleDialog = () => {
  handleCancelCapitalHandleDialog();
};
const submitCapitalHandleForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      dialogCapitalHandleVisible.value = false;
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetCapitalHandleForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<template>
  <div class="client-list-container">
    <el-card shadow="hover" class="mb-2">
      <ReHeaderSearch tableType="clientList" />
    </el-card>
    <ReTable type="clientList" class="content-body" />
    <!--  资金查看弹窗  -->
    <ReNewDialog
      :visible="dialogViewVisible"
      :isShowFooter="false"
      dialogTitle="资金查看"
    >
      <template #content>
        <el-form :model="viewForm" label-width="auto">
          <el-form-item label="账号">
            <el-input v-model="viewForm.account" disabled />
          </el-form-item>
          <el-form-item label="可用余额">
            <el-input v-model="viewForm.money" disabled />
          </el-form-item>
          <el-form-item label="幸运币">
            <el-input v-model="viewForm.lucky_coin" disabled />
          </el-form-item>
          <el-form-item label="星石">
            <el-input v-model="viewForm.star_stone" disabled />
          </el-form-item>
        </el-form>
      </template>
    </ReNewDialog>
    <!--  修改  -->
    <ReNewDialog
      :visible="dialogEditVisible"
      dialogTitle="修改用户信息"
      @close="handleCloseEditDialog"
      @confirm="handleConfirmEditDialog"
    >
      <template #content>
        <el-form
          ref="ruleEditFormRef"
          :model="editForm"
          :rules="editRules"
          label-width="auto"
        >
          <el-form-item label="账号">
            <el-input v-model="editForm.account" />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="editForm.mobile" />
          </el-form-item>
          <el-form-item label="用户级别">
            <el-select
              v-model="editForm.user_level"
              placeholder="请选择用户级别"
            >
              <el-option
                v-for="item in userLevelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="editForm.password" />
          </el-form-item>
          <el-form-item label="交易密码">
            <el-input v-model="editForm.deal_password" />
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="editForm.id_card" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="editForm.user_name" />
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="editForm.nick_name" />
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="editForm.status"
              class="ml-2"
              inline-prompt
              active-text="正常"
              inactive-text="禁用"
            />
          </el-form-item>
          <el-form-item label="虚拟">
            <el-switch
              v-model="editForm.is_virtual"
              class="ml-2"
              inline-prompt
              active-text="是"
              inactive-text="否"
            />
          </el-form-item>
          <el-form-item label="代理">
            <el-switch
              v-model="editForm.is_agency"
              class="ml-2"
              inline-prompt
              active-text="是"
              inactive-text="否"
            />
          </el-form-item>
        </el-form>
      </template>
    </ReNewDialog>
    <!--  换绑上级  -->
    <ReNewDialog
      :visible="dialogChangeSuperiorVisible"
      dialogTitle="换绑上级"
      @close="handleCancelChangeSuperiorDialog"
      @confirm="handleConfirmChangeSuperiorDialog"
    >
      <template #content>
        <el-form :model="viewForm" label-width="auto">
          <el-form-item label="账号">
            <el-input v-model="changeSuperiorForm.account" />
          </el-form-item>
          <el-form-item label="上级ID">
            <el-input v-model="changeSuperiorForm.superior_id" />
          </el-form-item>
        </el-form>
      </template>
    </ReNewDialog>
    <!--  资金操作  -->
    <ReNewDialog
      :visible="dialogCapitalHandleVisible"
      dialogTitle="资金操作"
      @close="handleCancelCapitalHandleDialog"
      @confirm="handleConfirmCapitalHandleDialog"
    >
      <template #content>
        <el-form
          ref="capitalHandleRuleFormRef"
          :model="capitalHandleForm"
          :rules="capitalHandleRules"
          label-width="auto"
        >
          <el-form-item label="账号">
            <el-input v-model="capitalHandleForm.account" disabled />
          </el-form-item>
          <el-form-item label="金额类型">
            <el-select
              v-model="capitalHandleForm.money_type"
              placeholder="请选择金额类型"
            >
              <el-option
                v-for="item in moneyTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="操作类型">
            <el-select
              v-model="capitalHandleForm.handle_type"
              placeholder="请选择操作类型"
            >
              <el-option
                v-for="item in handleTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="操作金额" prop="handle_amount">
            <el-input
              v-model="capitalHandleForm.handle_amount"
              placeholder="请输入操作金额"
              type="number"
            />
          </el-form-item>
          <el-form-item label="操作备注">
            <el-input
              v-model="capitalHandleForm.handle_memo"
              placeholder="请输入操作备注"
              type="textarea"
            />
          </el-form-item>
        </el-form>
      </template>
    </ReNewDialog>
  </div>
</template>
